const customTags = ['if', 'for'];
const reg_single_bracket = /\{(.*?)\}/g;
const reg_double_bracket = /\{\{(.*?)\}\}/g;


export default function compileTemplate(template, data) {

  template = replaceVar(template, data, reg_double_bracket);

  // console.log(template, data);
  const _node = document.createElement('div');
  _node.innerHTML = template;
  // console.log(_node);

  // console.log(compileNode(_node, data));
  return compileNode(_node, data);
}

function compileNode(node, data) {
  //获取所有节点
  const allNodes = node.querySelectorAll('*');

  // console.log(allNodes);
  // NodeList(5) [ul.list, h1, for.item, span, span]

  allNodes.forEach(item => {
    // console.log(item); ul.list/h1/for.item/span...
    const tagName = item.tagName.toLowerCase();

    //排除非html标签 if for
    if (customTags.includes(tagName)) {
      replaceNode(item, tagName, data);
    }
  });

  //将符合的元素节点返回出去
  // console.log([...node.childNodes]); [text, ul.list, text]
  // console.log([...node.childNodes].find(...)) -> <ul class="list">...</ul>
  return [...node.childNodes].find(item => item.nodeType === 1);

}

function replaceNode(node, tag, data) {
  /**
   * <for data="list" tag="li" class="item">
      <span>姓名: { name }</span>
      <span>年龄: { age }</span>
    </for>
   */

  const dataKey = node.getAttribute('data');
  // console.log(dataKey); -> list

  const className = node.className;
  // console.log(className); -> item

  const realTag = node.getAttribute('tag');
  // console.log(realTag); -> li

  switch (tag) {
    case 'for':
      vFor(node, data, dataKey, className, realTag);
      break;
    default:
      break;
  }

}

function vFor(node, data, dataKey, className, realTag) {

  const oFrag = document.createDocumentFragment();

  /**
   * data.list = [{
      id: 1,
      name: '张三',
      age: 18
    }, {
      id: 2,
      name: '李四',
      age: 19
    }, {
      id: 3,
      name: '王五',
      age: 20
    }]
   */

  // data[dataKey] -> data.list
  data[dataKey].forEach(item => {
    // console.log(item); -> {id: 1, name: '张三', age: 18}

    const el = document.createElement(realTag);
    // console.log(el); -> <li></li> x 5

    el.className = className ? className : '';

    // console.log(node.innerHTML);
    //<span>姓名: { name }</span> <span>年龄: { age }</span>
    el.innerHTML = replaceVar(node.innerHTML, item, reg_single_bracket);

    /**
     console.log(el);
     * <li class="item">
     *   <span>姓名: 张三</span>
     *   <span>年龄: 18</span>
     * </li>
     */

    /**
     * console.log(oFrag);
     * #document-fragment
     *   <li class="item">...</li>
     *   <li class="item">...</li>
     *   <li class="item">...</li>
     */

    oFrag.appendChild(el);
  });

  //将<for>...</for> 替换为oFrag碎片
  // console.log(node);
  //<for data="list" tag="li" class="item">...</for>

  // console.log(node.parentNode);
  //<ul class="list">...</ul>

  node.parentNode.replaceChild(oFrag, node);

}

//有可能是{} 也有可能是{{}}
function replaceVar(html, data, reg) {
  return html.replace(reg, function (node, key) {
    // console.log(key); -> name/age
    const obj = {};
    key = key.trim();
    return obj[key] = data[key];
  })
}